<template>
  <!-- 选择店员 -->
  <a-modal v-model:visible="showSalesDialog" title="选择店员" title-align="start" :on-before-ok="submitData" @cancel="closedDialog">
    <div style="min-height: 120px">
      <div class="flex-c" style="margin-bottom: 20px">
        <p style="width: 120px; text-align: right; margin-right: 20px">
          <span class="warningColor">*</span>
          <span>选择店员</span>
        </p>
        <a-select v-model="users" multiple allow-clear style="width: 300px">
          <a-option v-for="(item, index) in userList" :key="index" :value="item.id">{{ item.userName }}</a-option>
        </a-select>
      </div>
      <div class="flex-c">
        <p style="width: 120px; text-align: right; margin-right: 20px">
          <span class="warningColor">*</span>
          <span>设置方式</span>
        </p>
        <a-radio-group v-model="clerkType">
          <a-radio :value="1">新增</a-radio>
          <a-radio :value="2">覆盖</a-radio>
        </a-radio-group>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { getOrganizesUser, updateShopMarketBatch } from '@/api/system'
  export default defineComponent({
    name: 'ChooseUser',
    props: {
      isShow: {
        type: Boolean,
        default: false,
      },
      idList: {
        type: Array,
        default: () => [],
      },
    },
    emits: ['closed', 'success'],
    setup(props, { emit }) {
      const showSalesDialog = ref(props.isShow)
      const users = ref<any>()
      const userList = ref<Array<any>>([]) //用户列表
      const clerkType = ref(0)

      // 获取用户列表
      async function getUserList() {
        const res: any = await getOrganizesUser({
          depart: false,
          pageNum: 1,
          pageSize: 1000,
        })
        userList.value = res?.data?.records || []
      }
      getUserList()
      // 关闭弹窗
      function closedDialog() {
        users.value = null
        emit('closed')
      }
      // 选择用户
      async function submitData() {
        if (!users.value?.length) {
          Message.error('请选择店员')
          return false
        }
        if (!clerkType.value) {
          Message.error('请选择设置方式')
          return false
        }
        const res: any = await updateShopMarketBatch({
          clerkType: clerkType.value,
          idList: props.idList,
          shopClerkIds: users.value,
        })
        if (!res) return false
        Message.success('店员设置成功！')
        emit('success')
        closedDialog()
        return true
      }
      return {
        showSalesDialog,
        closedDialog,
        submitData,
        userList,
        users,
        clerkType,
      }
    },
  })
</script>
